<template>
  <div class="l_configure">
    <el-card class="box-card">
      <!-- 按钮 -->
      <el-button type="primary" @click="createClick">添加</el-button>
      <!-- 弹窗 -->
      <el-dialog title="添加套餐" :visible.sync="dialogFormVisible">
        <el-form :model="configureForm" :rules="createFormRules" ref="configureObj">
          <!-- 用户名 -->
          <el-form-item label="价格" :label-width="formLabelWidth" prop="price">
            <el-input v-model="configureForm.price"></el-input>
          </el-form-item>
          <!-- 昵称 -->
          <el-form-item label="喵喵币" :label-width="formLabelWidth" prop="miao_number">
            <el-input v-model="configureForm.miao_number"></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item label="建设币" :label-width="formLabelWidth" prop="build_number">
            <el-input v-model="configureForm.build_number"></el-input>
          </el-form-item>
          <!-- 确认密码 -->
          <el-form-item label="新用户价格" :label-width="formLabelWidth" prop="new_user_price">
            <el-input v-model="configureForm.new_user_price" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item class="l_personnel-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateFn">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 内容 -->
      <el-table :data="userlist">
        <el-table-column label="id" prop="id" min-width="30"></el-table-column>
        <el-table-column label="价格" prop="price" min-width="70"></el-table-column>
        <el-table-column label="喵喵币" prop="miao_number" min-width="70"></el-table-column>
        <el-table-column label="建设币" prop="build_number" min-width="70"></el-table-column>
        <el-table-column label="新用户价格" prop="new_user_price" min-width="80"></el-table-column>
        <el-table-column label="时间" prop="created_at" min-width="140"></el-table-column>
        <el-table-column label="操作" min-width="110">
          <template slot-scope="scope">
            <el-button type="text" size="small" icon="el-icon-user" @click="updateClick(scope.row)">修改</el-button>
            <el-button type="text" size="small" icon="el-icon-delete" @click="deleteFn(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>

import util from "../../utils/request"

export default {
  name: "users",
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      configureForm: {
        price: 0,
        miao_number: 0,
        build_number: 0,
        new_user_price: 0
      },
      // 表单验证规则
      createFormRules: {
        price: [
          { required: true, message: '价格不能为空', trigger: 'blur' },
          { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入有效的数字', trigger: 'blur' }
        ],
        miao_number: [
          { required: true, message: '喵喵币不能为空', trigger: 'blur' },
          { type: 'number', message: '请输入有效数字', trigger: 'blur' },
        ],
        build_number: [
          { required: true, message: '建设币不能为空', trigger: 'blur' },
          { type: 'number', message: '请输入有效数字', trigger: 'blur' },
        ],
        new_user_price: [
          { required: true, message: '新用户价格不能为空', trigger: 'blur' },
          { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入有效的数字', trigger: 'blur' }
        ]
      },
      formLabelWidth: '120px',
      userlist: [],
    };
  },
  created() {
    this.configureFn();
  },
  methods: {
    //添加弹窗
    createClick() {
      var _this = this;
      _this.configureForm.price = 0
      _this.configureForm.miao_number = 0
      _this.configureForm.build_number = 0
      _this.configureForm.new_user_price = 0
      this.dialogFormVisible = true;
    },

    //修改弹窗
    updateClick(row) {
      var _this = this;
      _this.configureForm.price = row.price
      _this.configureForm.miao_number = row.miao_number
      _this.configureForm.build_number = row.build_number
      _this.configureForm.new_user_price = row.new_user_price

      this.dialogFormVisible = true;
    },

    // 列表
    configureFn() {
      var _this = this;
      var myToken = window.localStorage.getItem("token");
      var uesrObj = {};
      uesrObj.page = 1;
      uesrObj.limit = 10;
      util.call_netA("post", "/admin/pay_package_config/list", uesrObj, function (data) {
        var res = data.data;
        if (!myToken) {
          _this.$message({
            message: res.msg,
            center: true,
            type: 'success'
          });
          _this.$router.push('/');
        } else {
          if (res.code == 200) {
            var data = res.data.data;
            console.log(data)
            _this.userlist = data;
          }

        }
      }, function (err) { }, myToken)
    },

    // 保存
    updateFn() {
      var _this = this;
      var myToken = window.localStorage.getItem("token");
      _this.$refs.configureObj.validate(valid => {
        if (!valid) return false;
        var uesrObj = _this.configureForm
        util.call_netA("post", "/admin/pay_package_config/save", uesrObj, function (data) {
          _this.dialogFormVisible = false
          _this.$message.success("操作成功");

          // todo 璐姐 刷新没生效
          _this.refreshData();
        }, function (err) { }, myToken)
      })
    },

    // 删除
    deleteFn(row) {
      var _this = this;
      var myToken = window.localStorage.getItem("token");
      var uesrObj = {};
      uesrObj.id = row.id;
      util.call_netA("delete", "/admin/pay_package_config/delete", uesrObj, function (data) {
        _this.$message.success("操作成功");

        // todo 璐姐 刷新没生效
        _this.refreshData();

      }, function (err) { }, myToken)
    }
  },


};
</script>

<style scoped></style>
